<template>
  <div class="rankClassGirls">
    <!-- 分类 -->
    <div class="rankGirls">
      <ul>
        <li :class="{ con: flag == 0 }" @click="flag = 0">全部分类</li>
        <li :class="{ con: flag == 1 }" @click="flag = 1">人气榜</li>
        <li :class="{ con: flag == 2 }" @click="flag = 2">好评榜</li>
        <li :class="{ con: flag == 3 }" @click="flag = 3">完结榜</li>
        <li :class="{ con: flag == 4 }" @click="flag = 4">新书榜</li>
        <li :class="{ con: flag == 5 }" @click="flag = 5">热搜榜</li>
        <li :class="{ con: flag == 6 }" @click="flag = 6">会员榜</li>
        <li :class="{ con: flag == 7 }" @click="flag = 7">飙升榜</li>
      </ul>
    </div>

    <div class="rankGirlsRight">
      <ul>
        <li v-show="flag == 0">
          <div class="content">
            <li>
              <div class="title">{{ matter.title }}</div>
              <div class="child">
                <li
                  v-for="(item, index) in matter.cont"
                  :key="index"
                  @click="$router.push('/publicRank')"
                >
                  <p>{{ item }}</p>
                  <img :src="matter.imgs[index]" />
                  <i class="iconfont icon-redu" v-show="index < 2"></i>
                </li>
              </div>
            </li>

            <li>
              <div class="title">{{ role.title }}</div>
              <div class="orderChild">
                <li v-for="(item, index) in role.cont" :key="index">
                  <p>{{ item }}</p>
                  <i class="iconfont icon-redu" v-show="index < 2"></i>
                </li>
              </div>
            </li>

            <li>
              <div class="title">{{ plot.title }}</div>
              <div class="orderChild">
                <li v-for="(item, index) in plot.cont" :key="index">
                  <p>{{ item }}</p>
                  <i class="iconfont icon-redu" v-show="index < 3"></i>
                </li>
              </div>
            </li>
          </div>
        </li>

        <li v-show="flag == 1">
          <h1>人气书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>

        <li v-show="flag == 2">
          <h1>好评书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>

        <li v-show="flag == 3">
          <h1>完结书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>

        <li v-show="flag == 4">
          <h1>新书书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>

        <li v-show="flag == 5">
          <h1>热搜书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>

        <li v-show="flag == 6">
          <h1>会员书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>

        <li v-show="flag == 7">
          <h1>飙升书籍排行</h1>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="rank">
              <li
                v-for="(item, index) in publicContent"
                :key="item.id"
                @click="
                  $router.push({ name: 'synopsis', query: { id: item.id } })
                "
              >
                <div class="img">
                  <img :src="item.img" />
                </div>

                <div class="content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    <span>{{ item.type }}</span> · <span>{{ item.end }}</span>
                  </p>
                </div>

                <div class="num">{{ index + 1 }}</div>
              </li>
            </div>
          </van-list>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getRecommendRank, getClassification } from "../../../api/index";
export default {
  data() {
    return {
      flag: 0,
      list: [],
      loading: false,
      finished: false,
      publicContent: [],
      matter: [], // 题材
      plot: [], // 情节
      role: [], // 角色
    };
  },
  created() {
    getRecommendRank().then((data) => {
      this.publicContent = data.recommendRank.like;
      getClassification().then((data) => {
        this.matter = data.classification.girls.matter;
        this.plot = data.classification.girls.plot;
        this.role = data.classification.girls.role;
        // console.log(this.matter);
      });
    });
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less">
.rankClassGirls {
  width: 100%;
  height: 100vh;
  position: relative;
  .rankGirls {
    position: fixed;
    width: 25%;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #f6f7f9;
    ul {
      width: 100%;
      li {
        width: 100%;
        padding: 20px 0;
        text-align: center;
        color: #646566;
        font-size: 16px;
      }
      .con {
        font-size: 18px;
        color: #1989fa;
        font-weight: 600;
      }
    }
  }
  .rankGirlsRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 74.5%;
    height: 100%;
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    ul {
      padding-bottom: 50px;
      li {
        margin-bottom: 20px;
        .title {
          font-size: 16px;
          font-weight: 600;
          padding-bottom: 15px;
        }
        .child {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 40%;
            border-radius: 10px;
            background-color: #f6f7f9;
            padding: 12px 10px;
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            position: relative;
            margin-bottom: 10px;
            p {
              font-size: 14px;
              width: 60px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            img {
              width: 35px;
              height: 50px;
              border-radius: 5px;
            }
            i {
              position: absolute;
              right: -8px;
              top: -22px;
              color: #e12319;
              font-size: 25px;
            }
          }
        }
        .orderChild {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 23%;
            border-radius: 10px;
            background-color: #f6f7f9;
            padding: 10px 10px;
            text-align: center;
            line-height: 30px;
            position: relative;
            margin-bottom: 10px;
            p {
              font-size: 14px;
            }
            i {
              position: absolute;
              right: -8px;
              top: -15px;
              color: #e12319;
              font-size: 25px;
            }
          }
        }
        h1 {
          padding-bottom: 15px;
          font-size: 14px;
        }
        .rank {
          li {
            display: flex;
            .img {
              width: 40px;
              height: 60px;
              border-radius: 5px;
              padding-right: 10px;
              img {
                width: 40px;
                height: 60px;
                border-radius: 5px;
              }
            }
            .content {
              flex: 1;
              h1 {
                padding: 12px 0 8px 0;
                font-size: 16px;
                font-weight: 600;
                width: 150px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              p {
                display: block;
                span {
                  color: #646566;
                  font-size: 12px;
                }
              }
            }
            .num {
              flex: 0 0 20px;
              color: #ff5b00;
              font-size: 18px;
              padding-top: 10px;
            }
          }
        }
      }
    }
  }
}
</style>